<script setup lang="ts">
import ModalComponent from '@runtime/module/Modal/ModalComponent';
import HomeContent from '@components/Apps/Simulation/HomeContent';
import SplashComponent from '@components/Splash/SplashComponent';
import { computed, ref, watch } from 'vue'

const rate = ref('translate(-100%,0)')
watch(() => HomeContent.Default.ProgressVal.value, (newVal, oldVal) => {
  if (newVal != oldVal) {
    rate.value = `translate(-${newVal}%,0)`
  }
})

</script>

<template>
  <!-- <router-view />
    <router-view name="modal" v-if="ModalComponent.Default.State.value"></router-view> -->
  <!-- 切换路由 -->
  <!-- <router-link to="/"></router-link> -->
  <!-- 路由出口 -->
  <router-view></router-view>
  <div class="loading" v-show="HomeContent.Default.Loaded.value">
    <!-- <a-spin size="large" class="large" /> -->
    <div class="title">柴油发动机系统仿真实训教学系统</div>
    <img src="/structure/bus_bg.png" alt="" class="LodingImg">
    <div class="LoadBox">
      <img src="/structure/progress_bg.png" alt="" class="progressImg rate">
      <span class="rateName">
        {{ HomeContent.Default.ProgressText.value }}
      </span>
      <!-- <a-spin size="large" class="large" /> -->
    </div>
  </div>
</template>
<style scoped>
@font-face {
  font-family: "PangMenZhengDao";
  src: url(../src/assets/font/PangMenZhengDao.TTF);
}

.loading {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  text-align: center;
  background-image: url('/structure/lod_bg.png');
  background-repeat: no-repeat;
  background-size: 100% 800px;
  background-color: #011D3D;
  overflow: hidden;
}

.large {
  /* position: absolute;
  left: 50%;
  top: 50%; */
}

.LodingImg {
  margin-top: 263px;
  width: 1920px;
  height: 771px;
}

.Tip {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 9999;
  color: #fff;
}

.title {
  position: absolute;
  top: 200px;
  left: 263px;
  font-size: 80px;
  font-family: PangMenZhengDao;
  font-weight: 400;
  color: #FFFFFF;
}

.LoadBox {
  position: absolute;
  left: 0;
  bottom: 20px;
  width: 1920px;
  height: 60px;
  background-image: url('/structure/loadBox_bg.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  font-size: 24px;
  line-height: 60px;
  font-weight: bold;
  color: #FEFFFF;
}

.progressImg {
  position: absolute;
  transform: v-bind(rate);
  left: 0;
  top: 4px;
  height: 52px;
}

.rateName {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  text-shadow:2px 2px 10px #000;
  transition: all .3s;
}</style>
